* {
  padding: 0;
  margin: 0;
}
html, ion-icon
body {
  background: url(../image/backgrond.jpg) no-repeat center fixed;
  background-size: cover;
  font-family: "微软雅黑";
  user-select: none;
  cursor: url(../image//normal.png),auto;
  /* overflow: hidden; */
  /* zoom:0.75; */
}
html::-webkit-scrollbar {
  width: 5px;
}

html::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}

html::-webkit-scrollbar-thumb {
  background-color: #ffa4a4;
  border-radius: 5px;
}
/* body{
  min-height:1920px;
  min-height: 800px;
} */
button,button:hover, ion-icon,ion-icon:hover{
    cursor: url(../image/select.png),auto;
}
a{
  cursor: pointer;
  cursor: url(../image/select.png),auto;
}
input{
  cursor: url(../image/input.png),auto;
}
.text-center {
  text-align: center;
}
#homePage {
  height: 100vh;
}
#homePage .title {
  width: 100%;
  padding-top: 100px;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#homePage .title h2 {
  display: flex;
  justify-content: center;
  letter-spacing: 10px;
  font-size: 6rem;
  color: white;
  text-shadow: 5px 5px 2px pink;
  margin-bottom: 2rem;
}
#homePage .title h2 span:nth-child(1) {
  display: block;
  transform: rotate(-5deg);
}
#homePage .title h2 span:nth-child(2) {
  transform: translateY(-10px);
}
#homePage .title h2 span:nth-child(3) {
  letter-spacing: 0px;
  transform: rotate(5deg);
}
#homePage .title h2 span:nth-child(4) {
  display: block;
  transform: rotate(-5deg);
}
#homePage .title h2 span:nth-child(5) {
  transform: translateY(-10px);
}
#homePage .title h2 span:nth-child(6) {
  transform: rotate(5deg);
}
#homePage .title p:nth-child(2) {
  font-size: 1.5rem;
  color: white;
  text-shadow: 2px 2px 4px rgb(3, 175, 255);
}
#homePage .title button {
  background-color: #a5de37;
  height: 50px;
  width: 50px;
  border: none;
  border-radius: 100%;
  margin-top: 50px;
  box-shadow: 0 7px 0 #8bc220, 0 8px 3px rgb(0 0 0 / 30%);
}
#homePage .title button:hover {
  background-color: #b9e563;
  box-shadow: 0 7px 0 #84b91f, 0 8px 3px rgba(0, 0, 0, 0.3);
}
#homePage .title button:active {
  background-color: #a1d243;
  transform: translateY(7px);
  box-shadow: 0 2px 0 #84b91f, 0 3px 3px rgba(0, 0, 0, 0.3);
}
.clickWindow {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content:center;
  align-items: center;
}
.windowFrist{
  height: 350px;
  width: 600px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25px;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
}
.windowText {
  margin-top: 15%;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}
.windowText>p>span{
  display: block;
  animation-name: errtips;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
}
@keyframes errtips {
  10% {
    transform: translateY(2px);
    transform: translateX(2px);
  }
  20% {
    transform: translateY(-2px);
    transform: translateX(-2px);
  }
  30% {
    transform: translateY(2px);
    transform: translateX(2px);
  }
  40% {
    transform: translateY(-2px);
    transform: translateX(-2px);
  }
  50% {
    transform: translateY(2px);
    transform: translateX(2px);
  }
  60% {
    transform: translateY(-2px);
  }
  70% {
    transform: translateY(2px);
  }
  80% {
    transform: translateY(-2px);
  }
  90% {
    transform: translateY(2px);
  }
  100% {
    transform: translateY(0);
  }
}
.windowModel
{
  text-align: center;
  margin-top: auto;
  margin-bottom: 10%;
}
.windowModel p {
  font-size: 1.1rem;
  font-weight: bold;
}
.windowModel .windowBtn {
  margin-top: 5%;
  width: 100%;
}
.windowBtn button{
  text-align: center;
  font-size: 1.1rem;
  font-weight: 550;
  margin-left:  15%;
  margin-right: 15%;
  border: solid 2px pink;
  border-radius: 15px;
  height: 40px;
  width:100px;
}
.windowBtn button:hover{
  color: #999;
  animation: glowing 3s infinite;
}
@keyframes glowing{
  0%{
    box-shadow: 0px 0px 10px 0px pink;
  }
  25%{
    box-shadow: 0px 0px 5px 1px pink;
  }
  50%{
    box-shadow: 0px 0px 10px 2px pink;
  }
  75%{
    box-shadow: 0px 0px 5px 1px pink;
  }
  100%{
    box-shadow: 0px 0px 10px 0px pink;
  }
}
#whitePage{
  height: 100vh;
  /* background-color: #fff; */
}
#whitePage2{
  height: 100vh;
  background-color: #fff;
}
#chatPage{
    height: 100vh;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.chatPageShell{
  border-radius: 20px;
  width: 1300px;
  height: 700px;
  background-color:#fff;
  display: flex;
  box-shadow: 0px 0px 10px 1px rgb(202, 202, 202);
}
.chatPageShell>.option{
  height: 100%;
  width:6%;
}
.chatPageShell>.chatList{
  height: 100%;
  width: 30%;
  background-color: rgb(248, 248, 255);
  overflow: hidden;
}
.chatPageShell>.chatRegion{
  height: 100%;
  width: 40%;
  border-right: 2px solid rgb(233, 233, 233);
}
.chatPageShell>.userInfor{
  height: 100%;
  width: 25%;
}
.chatPageShell>.option{
  padding-top: 100px;
}
.option .optionTop{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom:50px;
}
.option .optionTop>ion-icon{
  width:98%;
  font-size: 1.4rem;
  color:rgb(112, 112, 112);
  margin-bottom: 30px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.option .optionTop>ion-icon:nth-child(1):hover{
  border-left: solid 3px rgb(109, 248, 162);
  border-right: solid 3px rgb(109, 248, 162);
  color: rgb(109, 248, 162)
}
.option .optionTop>ion-icon:nth-child(2){
  border-left: solid 3px rgb(19,85,255);
  border-right: solid 3px rgb(19,85,255);
  color: rgb(19,85,255)
}
.option .optionTop>ion-icon:nth-child(3):hover{
  border-left: solid 3px rgb(247, 106, 106);
  border-right: solid 3px rgb(247, 106, 106);
  color: rgb(247, 106, 106)
}
.option .optionTop>ion-icon:nth-child(4):hover{
  border-left: solid 3px rgb(255, 238, 0);
  border-right: solid 3px rgb(255, 238, 0);
  color: rgb(255, 238, 0)
}
.option .optionTop>ion-icon:nth-child(5):hover{
  border-left: solid 3px rgb(0, 183, 255);
  border-right: solid 3px rgb(0, 183, 255);
  color: rgb(0, 183, 255)
}
.option .optionTop>ion-icon:nth-child(6):hover{
  border-left: solid 3px rgb(193, 37, 255);
  border-right: solid 3px rgb(193, 37, 255);
  color: rgb(193, 37, 255)
}
.option .optionBottom{
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  align-self: flex-end;
}
.option .optionBottom>ion-icon{
  font-size: 1.7rem;
  color:rgb(112, 112, 112);
  margin-bottom: 35px;
}
.option .optionBottom>ion-icon:nth-child(1):hover{
  color: rgb(255, 123, 0)
}
.option .optionBottom>ion-icon:nth-child(2):hover{
  color: rgb(255, 0, 0)
}
.chatList .headPhoto{
  width: 100%;
  height: 15%;
  border-bottom: solid 2px rgb(233, 233, 233);
  display: flex;
  align-items: center;
}
.headPhoto .headImg{
  margin-left: 15%;
}
.headPhoto .headImg>img{
  width: 75px;
  height:75px;
  border-radius: 100%;
  margin-right: 40px;
}
.headPhoto .headPhotoText p:nth-child(1){
  font-family: "Impact";
  font-size: 1.4rem;
}
.headPhoto .headPhotoText a{
  font-family: "Verdana";
  font-size: 1rem;
  color: rgb(140, 140, 140);
  margin-top: 15px;
}
.messageList .onlineNow{
  margin-top: 40px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  margin-right:20px
}
.messageList .onlineNow .onlineText p{
   font-family: "Trebuchet MS";
   font-weight: bold;
   font-size: 1.5rem;
   color: rgb(8,1,51);
   float:left;
}
.messageList .onlineNow .onlineText span{
  color:rgb(117, 117, 255);
  text-align: center;
  font-size: 1.3rem;
  float: right;
}
.messageList .onlineNow .onlineLogo{
  margin-top: 10px;
  width: 100%;
  height: 64px;
  overflow: auto;
}
.onlineLogo::-webkit-scrollbar {
  width: 5px;
}

.onlineLogo::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}

.onlineLogo::-webkit-scrollbar-thumb {
  background-color: #ffa4a4;
  border-radius: 5px;
}
.messageList .onlineNow .onlineLogo>img{
  height: 48px;
  width:48px;
  border-radius: 100%;
  margin-right: 25px;
  position: relative;
  margin-top: 15px;
}
.messageList .onlineNow .onlineLogo>img:nth-child(4){
  margin-right:0px;
}
.messageList .message{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}
.messageList .message .messageHead{
  margin-top: 10px;
  margin-left: 40px;
}
.messageList .message .messageHead .messageHeadLeft{
  width: 80%;
  float: left;
}
.messageList .message .messageHead .messageHeadLeft>p{
  font-family: "Trebuchet MS";
  font-weight: bold;
  font-size: 1.5rem;
  color: rgb(8,1,51);
  float:left;
}
.messageList .message .messageHead .messageHeadLeft>ion-icon{
  font-size: 1.4rem;
  margin-left:  20px;
  margin-top: 5px;
}
.messageList .message .messageHead .messageHeadRight{
  float: right;
}
.messageList .message .messageHead .messageHeadRight>ion-icon{
  font-size: 1.4rem;
  margin-top: 4px;
}
.messageList .message .messageSearch{
  width: 100%;
  margin-top: 20px;
  margin-left: 40px;
  display: flex;
  align-items: center;
}
.messageList .message .messageSearch div{
  font-size: 1.4rem;
  color: rgb(168, 168, 168);
  text-align: right;
  background-color: rgb(255, 255, 255);
  width:9%;
  height:25px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius: 10px 0px 0px 10px
}
.messageList .message .messageSearch input{
  height:45px;
  border:0;
  background-color:#fff;
  border-radius: 0 10px 10px 0px;
  width: 80%;
  color:rgb(168, 168, 168);
  font-size: 1rem;
  font-family: "Frutiger";
  padding-left: 10px;
}
.messageList .message .messageSearch input:focus{
  outline:0;
}
.messageList .message .messageMain{
  margin-top: 30px;
  margin-left: 40px;
  height:400px;
  display: flex;
  flex-direction: column;
  overflow-y:scroll;
}
.messageMain::-webkit-scrollbar {
  width: 5px;
}

.messageMain::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}

.messageMain::-webkit-scrollbar-thumb {
  background-color: #ffa4a4;
  border-radius: 5px;
}
.messageList .message .messageMain .messageChat{
  width: 100%;
  height:10%;
  display:flex;
  padding-top:20px;
  padding-bottom: 20px;
}
.messageChat:nth-child(1){
  background-color: #fff;
}
.messageList .message .messageMain .messageChatImg img{
  width: 50px;
  height: 50px;
  border-radius: 100%;
}
.messageList .message .messageMain .chatInfo{
  margin-left: 20px;
  height:60px;
  text-overflow:ellipsis;
  overflow:hidden;
}
.messageList .message .messageMain .chatInfo p:nth-child(1){
  font-family: "Trebuchet MS";
  font-size: 1.2rem;
  font-weight: bold;
  
}
.messageList .message .messageMain .chatInfo p:nth-child(2){
  font-family: "Verdana";
  color: #b8b8b8;
  margin-top: 10px;
 
}
.chatRegion .chatTitle{
  width: 100%;
  height: 100px;
  border-bottom: solid 2px rgb(233, 233, 233);
  text-align:center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.chatRegion{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chatRegion .chatTitle p:nth-child(1){
  font-size: 1.6rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color:rgb(8,1,51);
}
.chatRegion .chatTitle p:nth-child(2){
  font-size:0.9rem;
  color:#8d8d8d;
  position: absolute;
  bottom: 5px;
}
.chatRegion .chatFrame{
  background-color: rgb(251,250,250);
  /* height: 200px; */
  width: 100%;
  overflow-y: scroll;
  display: flex;
  height: 700px;
  /* align-items: flex-end; */
  /* justify-content: flex-end; */
  align-content:flex-end;
  flex-direction: column-reverse;
  padding-bottom: 10px;
  position: relative;
}
.chatFrame::-webkit-scrollbar {
  width: 5px;
}

.chatFrame::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}

.chatFrame::-webkit-scrollbar-thumb {
  background-color: #ffa4a4;
  border-radius: 5px;
}
.chatRegion .chatFrame .userChat{
  margin-right: 20px;
  margin-left: 60px;
  min-height:80px;
  width: 85%;
  margin-bottom: 10px;
  margin-top: 10px;
}
.chatRegion .chatFrame .userChat img{
  height: 40px;
  width: 40px;
  border-radius: 100%;
  float: right;
  margin-left: 10px;
}
.chatRegion .chatFrame .userChatText{
  float: right;
  position: relative;
}
.chatRegion .chatFrame .userChatText>p{
  text-align: right;
  font-family: "Trebuchet MS";
  font-size: 1.1rem;
}
.chatRegion .chatFrame .userChatText .usermsg{
  min-height:40px;
  line-height: 40px;
  margin-top: 10px;
  margin-right: 5px;
}
.chatRegion .chatFrame .userChatText .usermsg p{
  max-width: 430px;
  background-color:rgb(21,85,253);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  word-wrap:break-word;
  border-radius: 20px 0px 20px 20px;
  color:#fff;
  font-size: 1rem;
}
.chatRegion .chatFrame .botChat{
  margin-left: 20px;
  margin-right: 60px;
  width: 85%;
  margin-bottom: 10px;
  display: inline-block;
  margin-top: 10px;
}
.chatRegion .chatFrame .botChat img{
  height: 40px;
  width: 40px;
  border-radius: 100%;
  float: left;
  margin-right: 10px;
}
.chatRegion .chatFrame .botChatText{
  float: left;
  position: relative;
}
.chatRegion .chatFrame .botChatText>p{
  text-align: left;
  font-family: "Trebuchet MS";
  font-size: 1.1rem;
}
.chatRegion .chatFrame .botChatText .botmsg{
  min-height:40px;
  line-height: 40px;
  margin-top: 10px;
  margin-left: 5px;
}
.chatRegion .chatFrame .botChatText .botmsg p{
  max-width: 430px;
  background-color:rgb(253, 108, 176);
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  word-wrap:break-word;
  border-radius: 0px 20px 20px 20px;
  color:#fff;
  font-size: 1rem;
}
.chatRegion .chatInput{
  height:100px;
  display: flex;
  margin-bottom: 10px;
  justify-content:center;
  align-items:center;
  background-color: rgb(251,250,250);
  
}
.chatRegion .chatInputMain{
  width:90%;
  height:50px;
  box-shadow: 0px 0px 10px 1px rgb(224, 224, 224);
  border-radius: 10px;
  display:flex;
  align-items:center;
  overflow: hidden;
}

.chatRegion .chatInput .inputHeadPhoto{
  padding-left:15px
  
}
.chatRegion .chatInput .inputHeadPhoto img{
  height:30px;
  width:30px;
  border-radius:100%;
}
.chatRegion .chatInput .inputBody{
  height:50px;
  flex:1;
  line-height:50px;
}
.chatRegion .chatInput .inputBody input{
  height:45px;
  width: 100%;
  border: 0;
  padding-left: 10px;
  outline:0;
  font-size: 1.03rem;
}
.chatRegion .chatInput .inputFly ion-icon{
  border: 0;
  /* border-radius: 100%; */
  line-height: 50px;
  height:45px;
  width:30px;
  background-color: rgb(255, 255, 255);
  transform: rotate(-45deg);
  cursor: pointer;
  margin-left: 10px;
  margin-right: 5px;
}
.chatRegion .chatInput .inputFly ion-icon:hover{
  animation: inputFlyicon 0.3s;
  animation-fill-mode:forwards;
}
@keyframes inputFlyicon{
  from{
    cursor: url(../image/select.png),auto;
  }
  to{
    cursor: url(../image/select.png),auto;
    color: rgb(21,85,253);
  }
}
.userInfor .userInforHead{
  height:25%;
  width:100%;
  border-bottom:solid 2px rgb(233, 233, 233);
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.userinforMain {
  height:70%;
  overflow: auto;
}
.userinforMain::-webkit-scrollbar {
  width: 5px;
}

.userinforMain::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}

.userinforMain::-webkit-scrollbar-thumb {
  background-color: #ffa4a4;
  border-radius: 5px;
}
.userInfor .inforHeadImg img{
  height:100px;
  width:100px;
  border-radius: 100%;
  margin-bottom: 10px;
}
.userInfor .inforHeadText{
  color:#EE4F87;
}
.introduce .introduceHead{
  padding:30px;
  padding-top:20px;
}
.introduce .introduceHead p{
  font-family: "Trebuchet MS";
  font-weight: bold;
  font-size: 1.5rem;
  color: rgb(8,1,51);
  float:left;
}
.introduce .introduceMain{
  padding:30px;
  padding-top:20px;
  font-family: "黑体";
}
.myFeel .myFeelHead{
  padding:30px;
  padding-top:20px;
}
.myFeel .myFeelHead p{
  font-family: "Trebuchet MS";
  font-weight: bold;
  font-size: 1.5rem;
  color: rgb(8,1,51);
  float:left;
}
.myFeel .myFeelText{
  padding:30px;
  padding-top:20px;
  font-family: "黑体";
}
.whiteWall{
  position:absolute;
  z-index: 99999;
  width:100%;
  height:100%;
  background-color:#fff;
}